<template>
	<div id="formRegister">
		<h3>用户注册</h3>
		<el-form ref="form" label-width="80px">
			<el-form-item label="用户名">
				<el-input v-model="userData.userName"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="userData.password"></el-input>
			</el-form-item>
			<el-form-item label="确认密码">
				<el-input v-model="userData.password2"></el-input>
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="userData.phone"></el-input>
			</el-form-item>
			<!-- <el-form-item label="邮箱">
				<el-input label="邮箱" v-model="userData.email">
					<template slot="append">
						<el-button type="info" @click="sendEamil">发送</el-button>
					</template>
				</el-input>
			</el-form-item> -->
			<el-button class="login" type="primary" @click="indexLogin">登录</el-button>
			<el-button class="register" type="primary" @click="indexRegister">注册</el-button>
			<div style="margin-top:10px" ref="result">
				{{ msg }}
			</div>
		</el-form>
	</div>
</template>

<script>
	import { sendemail,register } from '@/api/api.js'
	export default {
		data() {
			return {
				userData: {
					userName: undefined,	// 用户名
					password: undefined,	// 密码
					password2: undefined,	// 确认密码
					phone: undefined,		// 电话
					email: undefined		// 邮箱
				},
				msg: ''
			}
		},
		methods: {
			// sendEamil() {
			// 	sendemail({mailer: this.userData.email}).then(res => {
			// 		console.log(res)
			// 	})
			// },
			// 注册
			indexRegister() {
				register({
					username: this.userData.userName,
					password: this.userData.password,
					password2: this.userData.password2,
					phone: this.userData.phone
				}).then((res) => {
					// console.log(this.userData.userName)
					// console.log(this.userData.password)
					// console.log(this.userData.password2)
					// console.log(this.userData.phone)
					if(res.data.code == 200) {
						// 判断密码是否为空
						if(this.userData.userName != undefined) {
							this.msg = '注册成功'
							console.log('注册成功')
							this.$router.push('/login')
						}else {
							this.msg = '请输入账号密码'
							this.$refs.result.style.color="red"
						}
						
					}else if(res.data.code == 202) {
						this.msg = '密码不一致，请重新输入'
						this.$refs.result.style.color="red"
					}else if(res.data.code == 201) {
						this.msg = '该用户已经存在，请换用户注册'
						this.$refs.result.style.color="red"
					}
				})
			},
			indexLogin() {
				this.$router.push('/login')
			}
		}
	}
</script>

<style scoped>
	.login, .register {
		margin-top: 30px;
	}
	#formRegister {
		margin-top: 100px;
	}
	.el-form-item  {
		width: 65%;
		margin: 0 auto;
		margin-top: 20px;
	}
	.el-form {
		width: 500px;
		margin: 0 auto;
		background-color: lavender;
		overflow: hidden;
		padding: 40px 0px;
	}
	h3 {
		text-align: center;
		background-color: lavender;
		width: 500px;
		margin: 0 auto;
	}
</style>
